
<div class="root">

    <h4 style="width:{loupeSize}px">Fireboat</h4>
    {#each $focusHighlights as h, i}
    <div class="loupe">
      <Loupe label={i + 1}>
        <LazyImage
          border={false}
          background={false}
          src="assets/images/renders/focus-2-{i + 2}.jpg" />
      </Loupe>
    </div>
    {/each}

    <h4 style="width:{loupeSize}px">Streetcar</h4>
    {#each $focusHighlights as h, i}
    <div class="loupe">
      <Loupe
        label={i + 1}
        color="#ffaa00">
        <LazyImage
          border={false}
          background={false}
          src="assets/images/renders/focus-3-{i + 2}.jpg" />
      </Loupe>
    </div>
    {/each}

    <div></div>
    <div class="figcaption">
      At mixed4d, Both "streetcar" and "fireboat" contain activations for what look like windows.
    </div>
    <div class="figcaption">
      Both classes contain activations for crane-like apparatuses, though they are less prominent than the window activations.
    </div>
    <div class="figcaption">
      "Fireboat" activations have much stronger attributions from water than "streetcar", where there is virtually no positive evidence.
    </div>
    <div class="figcaption">
      The activations for "streetcar" have much stronger attributions from buildings than does "fireboat". 
    </div>

</div>

<script>
  export default {
    components: {
      LazyImage: "../library/LazyImage.html",
      Loupe: "../components/Loupe.html"
    }
  }
</script>


<style>
  .main {
    position: relative;
  }
  .root {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto;
    padding: 0 20px;
    align-items: center;
  }
  .loupe {
    padding: 20px;
    align-self: start;
  }
  h4 {
    align-self: center;
    text-align: center;
    border-bottom: solid 1px rgba(0, 0, 0, 0.2);
    padding-bottom: 8px;
  }
  .figcaption {
    margin-bottom: 16px;
  }
  @media(min-width: 800px) {
    h4 {
      text-align: left;
    }
    .figcaption {
      max-width: 180px;
      margin: 0 auto;
      padding: 0 8px;
      box-sizing: border-box;
    }
    .root {
      max-width: 1000px;
      margin: 0 auto;
      display: grid;
      grid-auto-flow: row;
      grid-row-gap: 8px;
      grid-template-columns: 100px 1fr 1fr 1fr 1fr;
      align-items: start;
    }
  }
</style>